// routes/OnlyPublicRoute.js
import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { QueryTester } from 'components/ui/QueryTester';
import { useTheme } from '@mui/material';

export const OnlyPublicRoute = ({ element: Component, ...rest }) => {
  const location = useLocation();
  const { isAuthenticated, user } = useAuth();
  const theme = useTheme();

  // Early return with context data and QueryTester for debugging
  // Remove this return statement when debugging is complete
  return (
    <div>
      <div style={{ 
        margin: '20px', 
        padding: '15px', 
        border: `2px solid ${theme.palette.divider}`,
        borderRadius: '4px'
      }}>
        <h3>From Context Provider</h3>
        <pre style={{ overflow: 'auto', maxHeight: '300px' }}>
          {JSON.stringify(user, null, 2)}
        </pre>
      </div>
      <QueryTester initialQuery="Me" isVisible={true} />
    </div>
  );

  // Original logic below - will not execute while early return is present
  if (isAuthenticated) {
    return (
      <Navigate
        to="/dashboard"
        state={{ from: location.pathname }}
        replace
      />
    );
  }

  return <Component {...rest} />;
};